<template>
  <v-container class="col-24 y-container">
    <v-row class="y-row2" justify="center">
      <!--y-col1-->
      <v-col cols="3" class="y-col1">
        <!--个人信息-->
        <v-card class="y-personal" elevation="10">
          <v-img class="personal-img" width="80%" src="https://www.hualigs.cn/image/60a200a00df0a.jpg"></v-img>
          <v-card-text>
            <v-row>
              <v-col cols="4" class="personal-col">
                <v-btn text class="personal-btn">
                  <v-list-item-content class="personal-content">
                    <v-list-item-title>文章</v-list-item-title>
                    <v-list-item-subtitle class="personal-article">0</v-list-item-subtitle>
                  </v-list-item-content>
                </v-btn>
              </v-col>
              <v-divider vertical></v-divider>
              <v-col cols="4" class="personal-col">
                <v-btn text class="personal-btn">
                  <v-list-item-content class="personal-content">
                    <v-list-item-title>留言</v-list-item-title>
                    <v-list-item-subtitle class="personal-message">0</v-list-item-subtitle>
                  </v-list-item-content>
                </v-btn>
              </v-col>
              <v-divider vertical></v-divider>
              <v-col cols="4" class="personal-col">
                <v-btn text class="personal-btn">
                  <v-list-item-content class="personal-content">
                    <v-list-item-title>访客</v-list-item-title>
                    <v-list-item-subtitle class="personal-visitor">0</v-list-item-subtitle>
                  </v-list-item-content>
                </v-btn>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
        <!--标签-->
        <v-row class="col1-row" dense>
          <v-chip class="ma-1" color="cyan" label>
            <v-icon left>mdi-hexagram</v-icon>
            最新
            <v-icon left small class="col-icon">mdi-transfer-down</v-icon>
          </v-chip>
          <v-col class="col1-col1" cols="12">
            <v-sheet class="pa-3" v-show="hexagram.length==0">
              <v-skeleton-loader
                  class="y-card"
                  type="card"></v-skeleton-loader>
            </v-sheet>
            <v-card elevation="5" class="y-card" v-for="(card,index) in hexagram" :key="index" >
              <v-list-item one-line>
                <v-badge class="y-badge" color="#ff5151" left overlap bordered :content="card.content.length">
                  <v-list-item-avatar tile size="40" color="grey">
                    <v-img src="https://www.hualigs.cn/image/60a1e3eb869d6.jpg"></v-img>
                  </v-list-item-avatar>
                </v-badge>
                <v-list-item-content class="y-content" @click="toDetail(card.vue_uuid)">
                  <v-list-item-title class="y-card-title">
                    {{ card.title }}
                  </v-list-item-title>
                  <v-list-item-subtitle class="y-card-subtitle">{{ card.text }}</v-list-item-subtitle>
                </v-list-item-content>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn icon @click="card.show = !card.show">
                    <v-icon>{{ card.show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
                  </v-btn>
                </v-card-actions>
              </v-list-item>
              <v-expand-transition>
                <div v-show="card.show">
                  <v-list subheader two-line class="y-discuss-list">
                    <v-list-item v-for="(con,key)  in card.content" :key="key">
                      <v-list-item-content>
                        <v-list-item-title class="y-discuss-title">来自：{{ con.userName }}</v-list-item-title>
                        <v-list-item-subtitle class="y-discuss-subtitle" v-html="con.text">
                        </v-list-item-subtitle>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list>
                </div>
              </v-expand-transition>
            </v-card>
          </v-col>
          <v-chip class="ma-2" color="cyan" label style="margin-top: 10px">
            <v-icon left>mdi-fire</v-icon>
            热门
            <v-icon left small class="col-icon">mdi-transfer-down</v-icon>
          </v-chip>
          <v-col class="col1-col1" cols="12">
            <v-sheet class="pa-3" v-show="cards.length==0">
              <v-skeleton-loader
                  class="y-card"
                  type="card"></v-skeleton-loader>
            </v-sheet>
            <v-card elevation="5" class="y-card" v-for="card in cards" :key="card.id" >
              <v-list-item one-line>
                <v-badge class="y-badge" color="#ff5151" left overlap bordered :content="card.content.length">
                  <v-list-item-avatar tile size="40" color="grey">
                    <v-img src="https://www.hualigs.cn/image/60a1e3eb869d6.jpg"></v-img>
                  </v-list-item-avatar>
                </v-badge>
                <v-list-item-content class="y-content" @click="toDetail(card.vue_uuid)">
                  <v-list-item-title class="y-card-title">
                    {{ card.title }}
                  </v-list-item-title>
                  <v-list-item-subtitle class="y-card-subtitle">{{ card.text }}</v-list-item-subtitle>
                </v-list-item-content>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn icon @click="card.show = !card.show">
                    <v-icon>{{ card.show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
                  </v-btn>
                </v-card-actions>
              </v-list-item>
              <v-expand-transition>
                <div v-show="card.show">
                  <v-list subheader two-line class="y-discuss-list">
                    <v-list-item v-for="(con,key)  in card.content" :key="key">
                      <v-list-item-content>
                        <v-list-item-title class="y-discuss-title">来自：{{ con.userName }}</v-list-item-title>
                        <v-list-item-subtitle class="y-discuss-subtitle" v-html="con.text">
                        </v-list-item-subtitle>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list>
                </div>
              </v-expand-transition>
            </v-card>
          </v-col>
          <v-chip class="ma-3" color="cyan" label style="margin-top: 10px">
            <v-icon left>mdi-label-multiple</v-icon>
            标签
            <v-icon left small class="col-icon">mdi-transfer-down</v-icon>
          </v-chip>
          <v-col class="col1-col2" cols="12">
            <v-chip-group class="v-application" column>
              <v-chip v-for="(tag,con) in tags" :key="con" :color="tag.col">
                {{ tag.tag }}
              </v-chip>
            </v-chip-group>
          </v-col>
          <v-chip class="ma-3" color="cyan" label style="margin-top: 10px">
            <v-icon left>mdi-label-multiple</v-icon>
            分类
            <v-icon left small class="col-icon">mdi-transfer-down</v-icon>
          </v-chip>
          <v-col class="col1-col2" cols="12">
            <v-chip-group class="v-application" column>
              <v-chip v-for="(tag,con) in classIf" :key="con" :color="tag.col">
                {{ tag.tag }}
              </v-chip>
            </v-chip-group>
          </v-col>
        </v-row>
      </v-col>
      <!--y-col2-->
      <!--文章主题-->
      <v-col cols="9" class="y-col2">
        <v-row dense>
          <v-col class="col2-col" cols="6" v-for="card in content" :key="card.id">
            <v-card @click="toDetail(card.vue_uuid)">
              <v-hover v-slot="{ hover }">
                <v-img :src="card.image" class="col2-img" lazy-src="https://www.hualigs.cn/image/60a1f7b002da8.jpg">
                  <div class="col2-content">
                    <v-card-title
                        :class="hover?'col2-card-title col2-card-title-hover':'col2-card-title col2-card-title-on-hover'"
                        v-text="card.text"></v-card-title>
                    <v-card-actions class="col2-actions">
                      <v-spacer v-text="card.title" class="col2-title"></v-spacer>
                      <v-spacer v-for="n in 9" :key="n"></v-spacer>
                      <v-btn icon small>
                        <v-icon>mdi-thumb-up-outline</v-icon>
                      </v-btn>
                      <v-spacer></v-spacer>
                      <v-btn icon small>
                        <v-icon>mdi-heart-plus-outline</v-icon>
                      </v-btn>
                      <v-spacer></v-spacer>
                      <v-btn icon small>
                        <v-icon>mdi-share-circle</v-icon>
                      </v-btn>
                    </v-card-actions>
                  </div>
                </v-img>
              </v-hover>
            </v-card>
          </v-col>
        </v-row>
        <span style="font-size: 10px;color: #7b7b7b;">Copyright (c) 2021 羽渡尘. All rights reserved.</span>
      </v-col>
      <!--<v-col cols="1" class="y-col3">
        导航
      </v-col>-->
    </v-row>
  </v-container>
</template>

<script>
import anime from 'animejs'
import homeJson from "@/json/home.json"
import AV from "@/api/av";
import uuid from "uuid"

export default {
  name: 'Home',
  props: {
    overlay: Boolean
  },
  data() {
    return {
      actives: true,
      hexagram: [],//推荐
      cards: [],//热门
      content: [],//正文
      Counter: [],//访问量
      Comment: [],//评价
      article: 0,
      message: 0,
      visitor: 0,
      /*标签*/
      tags: [{
        tag: 'Java 1.8',
        col: 'blue'
      }, {
        tag: 'Fork/Join',
        col: 'orange'
      }, {
        tag: 'Stream',
        col: 'yellow'
      }, {
        tag: 'Spring',
        col: 'blue'
      }, {
        tag: 'Css3',
        col: 'green'
      }, {
        tag: 'Html5',
        col: 'purple'
      }],
      /*分类*/
      classIf: [{
        tag: '技术',
        col: 'orange'
      }, {
        tag: '二次元',
        col: 'blue'
      }, {
        tag: '科技',
        col: 'purple'
      }, {
        tag: '杂谈',
        col: 'yellow'
      }, {
        tag: '玄学',
        col: 'green'
      }, {
        tag: '手游',
        col: 'blue'
      }, {
        tag: '端游',
        col: 'orange'
      }],
    }
  },
  created() {
    this.content = homeJson
    this.article = this.content.length
  },
  watch: {
    /*overlay() {
      if (!this.overlay) {
        this.toList()
      }
    }*/
  },
  mounted() {
    this.toList()
  },
  methods: {
    async getComment() {//留言
      let that = this
      const query2 = new this.AV.Query('Comment')
      await query2.find().then((comments) => {
        that.Comment = comments
      });
    },
    async getCounter() { //访问量
      let that = this
      const query = new this.AV.Query('Counter')
      query.descending('time');
      query.limit(10);
      await query.find().then((comments) => {
        that.Counter = comments
      });
    },
    async toList() {
      await this.getCounter()
      await this.getComment()
      let that = this
      //留言
      that.message = that.Comment.length
      that.hexagram = []//最新
      for (let j = 0; j < that.content.length; j++) {
        let content = []
        that.Comment.forEach((comment) => {//把留言插入
          if ("/detail/" + that.content[j].vue_uuid == comment.get('url')) {
            content.push({
              userName: comment.get('nick'),
              text: comment.get('comment'),
            })
          }
        });
        that.hexagram.push({
          id: uuid.v1(),
          vue_uuid: that.content[j].vue_uuid,
          title: that.content[j].title,
          text: that.content[j].text,
          show: false,
          content: content,
        })
        if(that.content.length > 11){//只显示前10条最新
          break
        }
      }

      that.cards = []//热门
      that.visitor = 0
      that.Counter.forEach((comment) => {//根据访问量循环
        //访客
        that.visitor = parseInt(that.visitor) + parseInt(comment.get('time'))
        let content = []
        that.Comment.forEach((ti) => {//把留言插入
          if (comment.get('url') == ti.get('url')) {
            content.push({
              userName: ti.get('nick'),
              text: ti.get('comment'),
            })
          }
        });
        for (let j = 0; j < that.content.length; j++) {//把基本信息插入
          if ("/detail/" + that.content[j].vue_uuid == comment.get('url')) {
            that.content[j].time = comment.get('time');
            that.cards.push({
              id: uuid.v1(),
              vue_uuid: that.content[j].vue_uuid,
              title: that.content[j].title,
              text: that.content[j].text,
              show: false,
              content: content,
            })
            break
          }
        }
      })
      await this.personalNum()
    },
    activeMove: function () {
      this.$emit('activeMove', this.actives);
      this.actives = !this.actives
    },
    async personalNum() {
      let that = this
      anime({
        targets: '.personal-article',
        innerHTML: [0, that.article],
        round: 1,
        duration: 4000,
        easing: 'easeInOutExpo'
      });
      anime({
        targets: '.personal-message',
        innerHTML: [0, that.message],
        round: 1,
        duration: 4000,
        easing: 'easeInOutExpo'
      });
      anime({
        targets: '.personal-visitor',
        innerHTML: [0, that.visitor],
        round: 1,
        duration: 4000,
        easing: 'easeInOutExpo'
      });
    },
    toDetail(vue_uuid) {
      this.$router.push({
        path: 'detail',
        query: {
          id: vue_uuid
        }
      })
    }
  }
}
</script>
